<template>
  <section class="right-body">
    <div class="department">
      <div class="total">
        <div class="title">
          <span>气象状态</span>
          <img src="/src/assets/images/arrow.png">
        </div>
        <ul class="process">
          <li class="process-item">温度：{{ weatherData.temp }}℃</li>
          <li class="process-item">湿度：{{ weatherData.humidity }}%</li>
          <li class="process-item">风力：{{ weatherData.windScale }}级</li>
          <li class="process-item">风向：{{ weatherData.windDir }}</li>
          <li class="process-item">风速：{{ weatherData.windSpeed }}公里/小时</li>
          <li class="process-item-special" @click="openTab">
            <span>
              台风路径
            </span>
          </li>
        </ul>
      </div>

      <div class="team">
        <div class="title">
          <span>突发事件处置</span>
          <img src="/src/assets/images/arrow.png">
        </div>
        <div class="team-content">
          <div class="team-detail">
            <div class="team-search">
              <el-input
                  v-model="searchValue"
                  placeholder="请输入事件编号"
                  class="input-with-select"
                  clearable
                  @clear="clearSearch"
              >
                <template #prepend>
                  <el-icon @click="search" style="cursor: pointer;"><Search /></el-icon>
                </template>
              </el-input>
            </div>
            <div class="team-body">
<!--              分开写，可能后续会有不一样的内容-->
              <el-tabs v-model="activeTab" @tab-click="handleTabClick">
                <el-tab-pane label="待处理" name="1" class="event-content">
                  <div v-if="eventData.length">
                    <div class="event" v-for="item in eventData" @click="openEvent(item.id)">
                      <img :src="item.pic.split(',')[0]">
                      <div class="event-detail">
                        <span>事件编号 {{ item.no }}</span>
                        <span>发生地址 {{ item.deptId_dictText }}</span>
                        <span>
                        <a>上报人 {{ item.createId_dictText }}</a>
                        <a class="event-time">{{ item.happenTime }}</a>
                      </span>
                      </div>
                    </div>
                  </div>
                  <div v-else class="no-data">
                    暂无数据
                  </div>
                </el-tab-pane>
                <el-tab-pane label="已处理" name="2" class="event-content">
                  <div v-if="eventData.length">
                    <div class="event" v-for="item in eventData" @click="openEvent(item.id)">
                      <img :src="item.pic.split(',')[0]">
                      <div class="event-detail">
                        <span>事件编号 {{ item.no }}</span>
                        <span>发生地址 {{ item.deptId_dictText }}</span>
                        <span>
                        <a>上报人 {{ item.createId_dictText }}</a>
                        <a class="event-time">{{ item.happenTime }}</a>
                      </span>
                      </div>
                    </div>
                  </div>
                  <div v-else class="no-data">
                    暂无数据
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </div>
      </div>

      <div class="link">
        <div class="title">
          <span>相关链接</span>
          <img src="/src/assets/images/arrow.png">
        </div>
        <div class="link-content">
          <div class="link-item">
            <img src="/src/assets/images/link.png">
            <span>中国征兵网</span>
            <a href="https://www.gfbzb.gov.cn/" target="blank">前往</a>
<!--            <a @click="openOut('https://www.gfbzb.gov.cn/')">前往</a>-->
          </div>
          <div class="link-item">
            <img src="/src/assets/images/link.png">
            <span>国防部官网</span>
            <a href="http://www.mod.gov.cn/" target="blank">前往</a>
<!--            <a @click="openOut('http://www.mod.gov.cn/')">前往</a>-->
          </div>
          <div class="link-item">
            <img src="/src/assets/images/link.png">
            <span>中国民兵</span>
            <a href="http://www.81.cn/rmjz_203219/zgmb/index.html" target="blank">前往</a>
<!--            <a @click="openOut('http://www.gfbzb.gov.cn/')">前往</a>-->
          </div>
          <div class="link-item">
            <img src="/src/assets/images/link.png">
            <span>船讯网</span>
            <a href="https://www.shipxy.com/" target="blank">前往</a>
<!--            <a @click="openOut('http://www.shipxy.com/')">前往</a>-->
          </div>
          <div class="link-item">
            <img src="/src/assets/images/link.png">
            <span>中国军网</span>
            <a href="http://www.81.cn/" target="blank">前往</a>
<!--            <a @click="openOut('http://www.81.cn/')">前往</a>-->
          </div>
        </div>
      </div>
    </div>
  </section>
  <section v-if="show" class="taifeng-dialog">
      <img class="close" src="/src/assets/images/close.png" @click="openTab">
      <iframe id="muIframe" class="taifeng-body" src="http://typhoon.zjwater.gov.cn/wap.htm?eqid=a0b43154002172c2000000046493e9fc" frameborder="0"></iframe>
  </section>
  <section v-if="showDept" class="info-dialog">
    <div class="taifeng-body">
      <img class="close" src="/src/assets/images/close.png" @click="openDept">
      <div class="body-info">
        <div class="info-event">
          <span>事件编号：{{ eventInfo.no }}</span>
          <span>上报人：{{ eventInfo.createId_dictText }}</span>
          <span>发生地址：{{ eventInfo.eventPlace }}</span>
          <span>上报时间：{{ eventInfo.happenTime }}</span>
          <span>上报内容：{{ eventInfo.details }}</span>
          <span>事件状态：{{ eventInfo.type === '1' ? '待处理' : '已处理' }}</span>
        </div>
        <div class="info-img" v-if="eventInfo.pic">
          <img v-for="item in eventInfo.pic" :src="item">
        </div>
      </div>
      <div class="event-content" v-if="infoList.length">
        <el-timeline>
          <el-timeline-item v-for="item in infoList" center color="#0bbd87">
            <el-card>
              <div class="card-info">
                <span>处理人：{{ item.handleName }}</span>
                <span>处理详情：{{ item.handleDetails }}</span>
                <span>处理时间：{{ item.handleTime }}</span>
                <div>
                  <img v-for="pic in handlePicArray(item.handlePic)" :src="pic">
                </div>
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
      <div class="nodata" v-else>
        <img src="/src/assets/images/no.png">
      </div>
    </div>
  </section>
  <SSDialog :showContentComponent="showContentComponent" contentWidth="90%" contentHeight="90%" @closeContentComponent="closeContentComponent">
    <template #default>
          <iframe id="muIframe" class="taifeng-body" :src="showSrc" frameborder="0"></iframe>
    </template>
  </SSDialog>
</template>

<script setup name="Right">
import {ref, reactive, onMounted, toRefs, computed, provide} from "vue";
import { Search } from '@element-plus/icons-vue'
import axios from "axios";
import { eventList, eventDetail } from '@/api/demo.js'
import SSDialog from "@components/Dialog/index.vue";

const searchValue = ref('')
const activeTab = ref('1');
const params = {
  eventStatus: activeTab.value,
  key: searchValue.value,
  pageNo: 1,
  pageSize: 50
}
const showDept = ref(false)
const showContentComponent = ref(false)
const showSrc = ref('')

let eventData = ref('')

const weatherData = reactive({
  temp: null,
  humidity: null,
  windScale: null,
  windDir: null,
  windSpeed: null
})

const show = ref(false)

const eventInfo = reactive({
  no: '',
  eventPlace: '',
  createId_dictText: '',
  happenTime: '',
  details: '',
  pic: null
})
const infoList = ref(null)

const openOut = (url) => {
  showContentComponent.value = true
  showSrc.value = url
}

const closeContentComponent = (data) => {
  showContentComponent.value = data
}

const openDept = () => {
  const value = showDept.value
  showDept.value = !value
}

const openTab = () => {
  const value = show.value
  show.value = !value
}

const openEvent = (id) => {
  eventDetail({id: id}).then(res => {
    Object.assign(eventInfo, res.result)
    infoList.value = res.result.infoList
    if (eventInfo.pic) eventInfo.pic = eventInfo.pic.split(',')
    openDept()
  })
}

const changeNum = (val) => {
  console.log("val", val)
}

// 根据输入内容查询
function search() {
  params.key = searchValue.value
  getEventList()
}

// 清除搜索内容
const clearSearch = () => {
  params.key = ''
  getEventList()
}

onMounted(() => {
  getWeather()
  getEventList()
  setInterval(() => {
    getWeather()
    getEventList()
  }, 1000 * 60 * 10)
})

const handlePicArray = computed(() => {
  return (handlePic) => {
    if (handlePic) {
      return handlePic.split(',');
    }
    return [];
  };
});

// 切换tab标签
const handleTabClick = (tab) => {
  const { name } = tab.props
  params.eventStatus = name
  params.key = ''
  getEventList()
}

// 获取天气数据
function getWeather() {
  axios.get('https://devapi.qweather.com/v7/weather/now?location=101210412&key=41cba4c50ce54b29a72da3fb3a6da16f')
      .then(response => {
        const { temp, humidity, windScale, windDir, windSpeed } = response.data.now;
        // 更新reactive对象的字段
        Object.assign(weatherData, toRefs({ temp, humidity, windScale, windDir, windSpeed }));
      })
      .catch(error => {
        console.log(error)
      })
}

// 获取事件列表数据
function getEventList() {
  eventList(params).then(res => {
    const { records } = res.result
    eventData.value = records
  })
}
</script>

<style scoped lang="scss">
.right-body {
  height: 92%;
  width: 25%;
  background: url('@/assets/images/bk.png') #102b08 no-repeat center;
  position: absolute;
  right: 0;
  top: 8%;
  z-index: 8;

  .department {
    padding: 20px 0;
    margin: 0 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    color: #ffffff;

    .team, .link, .total {
      width: 100%;
    }

    .title {
      background: url('@/assets/images/title-bk.png') no-repeat center;
      width: 100%;
      font-size: 24px;
      padding: 10px 0;
      background-position-y: -6px;

      span {
        margin-left: 20px;
      }

      img {
        margin-left: 5px;
      }
    }

    .process {
      background-color: #023B13;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      padding-bottom: 10px;
      margin: 10px 0;

      .process-item {
        flex: 0 0 43%;
        background: url('@/assets/images/right-bk.png') no-repeat center;
        margin: 10px 0 0 10px;
        padding: 10px;
        background-size: contain;
      }

      .process-item-special {
        flex: 0 0 43%;
        background: url('@/assets/images/taifeng.png') no-repeat center;
        margin: 10px 0 0 10px;
        padding: 10px;
        background-size: contain;
        text-align: center;
        cursor: pointer;

        span {
          margin-left: 20px;
          font-size: 18px;
        }
      }
    }

    .team-content {
      background-color: #023B13;
      margin-top: 15px;
      padding: 12px;
      margin-bottom: 10px;

      .team-detail {
        .team-search {
          margin-bottom: 10px;
        }

        .team-body {
          height: 310px;

          .event-content {
            height: 260px;
            overflow-y: auto;

            .no-data {
              width: 100%;
              height: 100%;
              font-size: 24px;
              font-weight: bold;
              display: flex;
              align-items: center;
              justify-content: center;
            }

            .event {
              background-color: rgba(0, 30, 9, 0.7);
              display: flex;
              justify-content: flex-start;
              margin: 10px 0;
              padding: 10px;
              cursor: pointer;

              img {
                width: 100px;
                height: 100px;
                object-fit: fill;
              }

              .event-detail {
                display: inherit;
                flex-direction: column;
                justify-content: space-between;
                align-items: flex-start;
                width: 100%;
                margin-left: 10px;

                span {
                  flex: 0 0 33.33%;
                  width: 100%;
                  position: relative;
                }

                .event-time {
                  position: absolute;
                  right: 10px;
                  color: #c0bebe;
                }
              }
            }
          }
        }
      }

    }

    .link {

      .link-content {
        background-color: #023B13;
        padding: 10px 0;
        margin-top: 10px;
        height: 193px;
        overflow-y: auto;

        .link-item {
          background-color: #295134;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          padding: 9px 10px;
          position: relative;
          margin: 10px 10px 0 10px;

          img {
            width: 19px;
            height: 19px;
          }

          span {
            font-size: 20px;
            color: white;
            margin: 0 10px;
          }

          a {
            color: #ffffff;
            letter-spacing: 2px;
            font-size: 20px;
            background-color: #01861b;
            position: absolute;
            right: 10px;
            padding: 0 10px;
            cursor: pointer;
          }
        }
      }
    }
  }
}

.taifeng-dialog {
  width: 90%;
  height: 90%;
  position: absolute;
  z-index: 15;
  left: 5%;
  top: 5%;
  background: url('@/assets/images/center-bk.png') no-repeat center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;

  .taifeng-body {
    width: 90%;
    height: 85%;
    position: relative;
    top: 5px;
    color: #ffffff;
  }

  .close {
    width: 44px;
    height: 44px;
    cursor: pointer;
    position: absolute;
    right: 30px;
    top: 20px;
  }
}

.info-dialog {
  width: 58%;
  height: 70%;
  position: absolute;
  z-index: 15;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  background: url('@/assets/images/center-bkone.png') no-repeat center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;

  .taifeng-body {
    width: 80%;
    height: 75%;
    position: relative;
    top: -20px;

    .body-info {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      flex-direction: row;
      width: 100%;
      letter-spacing: 1px;
      font-family: fantasy;

      .info-event {
        flex: 0 0 48%;
        font-weight: bold;
        color: #ffffff;

        span {
          display: block;
        }
      }

      .info-img {
        flex: 0 0 48%;

        img {
          width: 100px;
          height: 60px;
          margin: 0 6px 6px 0;
        }
      }
    }

    .event-content {
      width: 100%;
      height: 72%;
      overflow-y: auto;
      font-family: cursive;
      margin-top: 10px;

      .card-info {

        span {
          font-size: 16px;
          display: block;
          font-weight: bolder;
          font-family: monospace;
        }

        img {
          margin: 5px 5px 0 0;
          width: 120px;
          height: 80px;
        }
      }
    }

    .close {
      width: 44px;
      height: 44px;
      cursor: pointer;
      position: absolute;
      right: -40px;
      top: -30px;
    }

    .nodata {
      width: 100%;
      height: 70%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

}

::v-deep(.el-input__inner) {
  color: #ffffff;
}
::v-deep(.el-progress-bar__outer) {
  background-color: transparent;
  border: solid 1px #387201;
  border-radius: 7px;
}
::v-deep(.el-progress-bar__inner) {
  border-radius: 5px;
}
::v-deep(.el-input) {
  background-color: #295434;
  border-radius: 8px;
}
::v-deep(.el-input-group__prepend) {
  padding: 0 5px;
}
::v-deep(.el-input-group__prepend), ::v-deep(.el-input-group--prepend>.el-input__wrapper) {
  background-color: #295434;
  box-shadow: 0 0 0 0 #295434 inset;
  border: solid 1px #295434
}

::v-deep(.el-tabs__item.is-active) {
  color: #0ABC2C;
  font-size: 20px;
}
::v-deep(.el-tabs__item) {
  color: #349146;
  font-size: 20px;
}
::v-deep(.el-tabs__nav-wrap::after) {
  content: none;
}
::v-deep(.el-tabs__active-bar) {
  background-color: #0ABC2C;
}
::v-deep(.el-tabs__nav-scroll) {
  text-align: center;
  display: flex;
  justify-content: center;
}

::-webkit-scrollbar {
  width: 0px;
}

</style>
